<!--
 * 顶部导航栏组件
 * 功能：显示应用Logo、导航菜单、主题切换按钮和用户头像
 * 作者：MetasoCreator Team
 * 创建时间：2025-01-19
 * 修改时间：2025-01-19
-->

<template>
  <header class="header-nav">
    <div class="nav-container">
      <!-- Logo区域 -->
      <div class="logo-section">
        <h1 class="logo-text">MetasoCreator</h1>
      </div>

      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          class="nav-menu-items"
        >
          <el-menu-item index="home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="search">
            <el-icon><Search /></el-icon>
            <span>搜索</span>
          </el-menu-item>
          <el-menu-item index="content">
            <el-icon><Document /></el-icon>
            <span>内容管理</span>
          </el-menu-item>
          <el-menu-item index="settings">
            <el-icon><Setting /></el-icon>
            <span>设置</span>
          </el-menu-item>
        </el-menu>
      </nav>

      <!-- 右侧操作区域 -->
      <div class="nav-actions">
        <!-- 主题切换按钮 -->
        <el-switch
          v-model="isDarkMode"
          @change="toggleTheme"
          class="theme-switch"
          :active-icon="Moon"
          :inactive-icon="Sunny"
          active-color="#2c3e50"
          inactive-color="#f39c12"
        />

        <!-- 用户头像和菜单 -->
        <el-dropdown @command="handleUserCommand" class="user-dropdown">
          <div class="user-avatar">
            <el-avatar :size="32" :src="userAvatar">
              <el-icon><User /></el-icon>
            </el-avatar>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>
                个人资料
              </el-dropdown-item>
              <el-dropdown-item command="history">
                <el-icon><Clock /></el-icon>
                历史记录
              </el-dropdown-item>
              <el-dropdown-item command="favorites">
                <el-icon><Star /></el-icon>
                我的收藏
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {
  House,
  Search,
  Document,
  Setting,
  User,
  Moon,
  Sunny,
  Clock,
  Star,
  SwitchButton
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAppStore } from '../stores/counter'
import { useRouter } from 'vue-router'

// 状态管理
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const activeIndex = ref('home')
const userAvatar = ref('')

// 计算属性
const isDarkMode = computed({
  get: () => appStore.isDarkTheme,
  set: (value) => {
    if (value !== appStore.isDarkTheme) {
      appStore.toggleTheme()
    }
  }
})
const currentTheme = computed(() => appStore.currentTheme)

// 方法
const handleSelect = (key) => {
  activeIndex.value = key
  // 这里可以添加路由跳转逻辑
  console.log('导航到:', key)
  ElMessage.info(`导航到: ${getMenuLabel(key)}`)
}

const getMenuLabel = (key) => {
  const labels = {
    home: '首页',
    search: '搜索',
    content: '内容管理',
    settings: '设置'
  }
  return labels[key] || key
}

const toggleTheme = (value) => {
  // 主题切换现在由状态管理处理
  ElMessage.success(`已切换到${value ? '暗色' : '亮色'}主题`)
}

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('打开个人资料')
      break
    case 'history':
      ElMessage.info('查看历史记录')
      break
    case 'favorites':
      ElMessage.info('查看我的收藏')
      break
    case 'logout':
      ElMessage.warning('退出登录')
      break
    default:
      console.log('未知命令:', command)
  }
}

// 生命周期
onMounted(() => {
  // 主题初始化现在由状态管理处理
})
</script>

<style scoped>
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-section {
  flex-shrink: 0;
}

.logo-text {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.logo-text:hover {
  opacity: 0.8;
}

.nav-menu {
  flex: 1;
  margin-left: 40px;
}

.nav-menu-items {
  border-bottom: none;
  background: transparent;
}

.nav-menu-items :deep(.el-menu-item) {
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.nav-menu-items :deep(.el-menu-item:hover),
.nav-menu-items :deep(.el-menu-item.is-active) {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: white;
}

.nav-menu-items :deep(.el-menu-item .el-icon) {
  margin-right: 5px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.theme-switch {
  --el-switch-on-color: #2c3e50;
  --el-switch-off-color: #f39c12;
}

.user-dropdown {
  cursor: pointer;
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.user-avatar:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.user-avatar :deep(.el-avatar) {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 15px;
  }
  
  .nav-menu {
    margin-left: 20px;
  }
  
  .nav-menu-items :deep(.el-menu-item span) {
    display: none;
  }
  
  .nav-actions {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: 16px;
  }
  
  .nav-menu {
    margin-left: 10px;
  }
  
  .nav-actions {
    gap: 10px;
  }
}
</style>